<template>
  <div>
    <button @click="flag=!flag">切换</button>
    <div class="item" v-if="flag">213</div>
    <div class="item" v-else>123</div>
    <p v-if="score<60">不及格</p>
    <p v-else-if="score<80">及格</p>
    <p v-else>优秀</p>
    <p>{{score>=60?"及格":"不及格"}}</p>

  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      flag: true,
      /* 面试题：v-if v-show
      原理上区别：v-if是通过创建和移除节点来实现节点的显示和隐
      藏，而v-show是通过display：none来实现显示和隐藏的。
      使用场景上的区别：v-if有更高的切换开销，v-show有更高的
      初始渲染开销。如果需要频繁切换使用v-show,运作时条件很少
      改变则使用v-if。 */
      score:60
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {},
};
</script>

<style scoped></style>
